<template>
	<router-view />
	<Settings ref="settingsRef" />
</template>

<script lang="ts">
import { defineComponent, getCurrentInstance, onMounted, onUnmounted, nextTick, ref } from 'vue';
import { Local } from '/@/utils/storage';
import { useStore } from '/@/store/index';
import Settings from '/@/layout/navBars/breadcrumb/settings.vue';

export default defineComponent({
	name: 'App',
	components: { Settings },
	setup() {
		const settingsRef = ref();
		const store = useStore();
		const { proxy } = getCurrentInstance() as any;

		// 布局配置弹窗打开
		const openSettingsDrawer = () => {
			settingsRef.value.openDrawer();
		};
		// 页面加载时
		onMounted(() => {
			nextTick(() => {
				// 监听布局配置弹窗点击打开
				proxy.mittBus.on('openSettingsDrawer', () => {
					openSettingsDrawer();
				});
				// 获取缓存中的布局配置
				if (Local.get('themeConfig')) {
					store.dispatch('themeConfig/setThemeConfig', Local.get('themeConfig'));
					document.documentElement.style.cssText = Local.get('themeConfigStyle');

					// rem与px的换算，以1920分辨率为基准，1rem=1px去设置，解决不同分辨率的情况下，px导致页面变形
					const rem = document.documentElement.clientWidth / 1920;
					// 设置页面根节点字体大小
					document.documentElement.style.fontSize = rem + 'px';
				}
			});
		});
		// 页面销毁时，关闭监听布局配置
		onUnmounted(() => {
			proxy.mittBus.off('openSettingsDrawer', () => {});
		});
		return {
			settingsRef,
		};
	},
});
</script>

<style></style>
